<template>
	<view class="home_category">
		<navigator class="category_item" 
		v-for="item of category" 
		:key="item.id"
		:url="`/pages/imgCategory/index?id=${item.id}`"
		>
			<image :src="item.cover" mode="aspectFill"></image>
			<view class="category_name">{{item.name}}</view>
		</navigator>
	</view>
</template>

<script>
	export default {
		mounted() {
			// 动态修改页面(组件)标题
			uni.setNavigationBarTitle({
				title: '分类'
			})
			this.getList()

		},
		data() {
			return {
				category: []
			}
		},
		methods: {
			async getList() {
				const {
					res
				} = await this.request({
					url: 'http://157.122.54.189:9088/image/v1/vertical/category'
				})
				this.category = res.category
			}
		},
	}
</script>

<style lang="scss" scoped>
	.home_category {
		display: flex;
		flex-wrap: wrap;

		.category_item {
			width: 33.33%;
			position: relative;
			border: 5rpx solid #FFFFFF;

			image {
				height: 240rpx;
			}

			.category_name {
				position: absolute;
				width: 100%;
				height: 50rpx;
				color: #fff;
				left: 0;
				bottom: 0;
				background-image: linear-gradient(to right top,
					rgba(0, 0, 0, 0.2),
					rgba(0, 0, 0, 0));
				font-size: 40rpx;
				display: flex;
				align-items: center;
				padding-left: 20rpx;
			}
		}
	}
</style>
